<template>
    <MyCard>
        <el-space>
            <span>状态:</span>
            <el-select>
                <el-option v-for="item in options" :key="item.id" :label="item.label" :value="item.value" />
            </el-select>
            <span>身份昵称:</span>
            <el-input placeholder="请输入身份昵称名称" clearable>
            </el-input>
            <el-button type="primary">查询</el-button>
        </el-space>
    </MyCard>
    <MyCard>
        <el-button type="primary" style="margin-bottom: var(--card-space);"
            @click="onConfirmBtn?.openDialog()">添加身份</el-button>
        <MyTable :columns="columns" :data="roleData.rows">
            <template #action="{ row }">
                <el-button link style="border: none;" type="primary"
                    @click="onConfirmBtn?.openDialog(row._id)">编辑</el-button>
                <el-button link style="border: none;" type="danger" @click="deleteRole(row._id)">删除</el-button>
            </template>
            <template #permissionIds="{ row }">
                {{row.permissionIds.map((item: any) => item.title).join(' / ')}}
            </template>
        </MyTable>
        <div class="flex-end" style="margin-top: 22px;">
            <el-pagination v-model:current-page="pageData.currentPage" v-model:page-size="pageData.pageSize"
                :page-sizes="[10, 20, 30]" :background="true" layout="total, sizes, prev, pager, next, jumper"
                :total="roleData.total" />
        </div>
    </MyCard>
    <roleForm ref="openDialog" @getRole='getRole'></roleForm>
</template>

<script setup lang="ts">
import { onMounted, ref, useTemplateRef, watch } from 'vue';
import roleForm from './roleForm.vue'
import { deleteRoleApi, getRoleApi } from '@/api/roleManage';
const roleData = ref<any>({ rows: [] });
const columns = [
    { label: 'ID', prop: '_id' },
    { label: '身份昵称', prop: 'name' },
    { label: '角色权限', prop: 'permissionIds' },
    { label: '状态', prop: 'state' },
    { label: '操作', prop: 'action', width: 240 },
];
const options = ref([
    { id: 1, label: '显示', value: 1 },
    { id: 2, label: '隐藏', value: 0 },
]);

// const { roleData, getRoleJoint } = useFindData();
onMounted(() => {
    getRole();
})

const onConfirmBtn: any = useTemplateRef('openDialog');
const pageData = ref({
    currentPage: 4,
    pageSize: 10,
})
watch([pageData,], () => {
    getRole();
}, { deep: true })
onMounted(() => {
    getRole();
})
watch([pageData,], () => {
    getRole();
}, { deep: true })
function deleteRole(_id: string) {
    ElMessageBox.confirm(
        '权限数据删除后不可恢复，确认删除?',
        '提示',
        {
            confirmButtonText: '确认',
            cancelButtonText: '取消',
            type: 'warning',
        }
    )
        .then(() => {
            deleteRoleApi({
                _id, creator: 'zhangjunling',
            })
                .then((res) => {
                    if (res.code == 200) {
                        ElMessage.success('删除成功!');
                        getRole();
                    } else {
                        ElMessage.error(res.message);
                    }
                })
        })
        .catch(() => { })
}

function getRole() {
    getRoleApi({ ...pageData.value, creator: 'zhangjunling' }).then(res => {
        if (res.code == 200) {
            roleData.value = res.data
        }
    })
}

</script>

<style scoped>
.el-input,
.el-select {
    width: 250px;

}
</style>